<template>
	<view class="fabu-body">
		<view class="image-pic" :style="'background-image:url(' + haibaoUrl + ')'">
			<!-- <image :src="haibaoUrl" style="width: 100%; height: 100%;"></image> -->
			<view class="image-pic-article">
			</view>
		</view>
		<tn-tabs :list="scrollList" :current="currentTab" :showBar="false" @change="tabChange"></tn-tabs>
		
		<view class="kecheng-height">
		  <block class="tn-bg-white" v-for="(item, index) in kechengList" :key="index">
		    <view class="article-shadow tn-bg-white tn-margin" @click="goDetailPage(item)">
		      <view class="tn-flex">
		        <view class="image-picx tn-margin-sm" :style="'background-image:url(' + item.imgUrl + ')'">
		          <view class="image-article">
		          </view>
		        </view>
		        <view class="tn-margin-sm tn-padding-top-xs tn-flex-direction-column" style="width: 100%;">
		          <view class="tn-text-lg tn-text-bold clamp-text-1 tn-margin-bottom">
		            {{ item.courseName }}
		          </view>
		          <view class="tn-text-md clamp-text-1 tn-margin-bottom">
		            <text class="tn-padding-right-sm">讲师</text>  <text class="zitineirong">{{ item.lecturerName }}</text> 
		          </view>
		          <view class="tn-text-md  clamp-text-1">
		            <text class="tn-padding-right-sm">时长</text>  <text class="zitineirong">{{item.duration}}分钟</text> 
		          </view>
		        </view>
		      </view>
		    </view>
		  </block>
		</view>
	</view>
</template>

<script>
	export default{
		name: 'fabudongtai',
		data(){
			return {//http://175.6.32.63:90/api/sysFileInfo/UploadFiles
				haibaoUrl: '/static/1.jpg',
				scrollList: [
				],
				currentTab: 0,
				kechengList: [],
				currentFenlei: null,
				pageIndex: 1,
				imageTitle: ''
			}
		},
		mounted(){
			this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
			// this.haibaoUrl = this.imageTitle + '08db7077-52af-45b3-89a6-b46700f9eea6'
			this.getKechengFenlei();
		},
		methods:{
			  tabChange(index) {
				this.currentTab = index;
				this.currentFenlei = this.scrollList[index];
				this.getKecheng();
			  },
			  goDetailPage(item){
				  uni.setStorageSync('kechengdetail', item)
				  uni.navigateTo({
				  	url: `/pages/kecheng/kechengDetail?id=1&name=${item.name}`,
				  })
			  },
			  getKechengFenlei(){
				  this.request({
					url: '/CourseType/List',
					method: 'get',
				  }).then(res => {
					  if(res.code == 200){
						  this.scrollList = res.data;
						  this.currentFenlei = this.scrollList[0];
						  this.getKecheng();
					  }
				  })
			  },
			  
			  getKecheng(){
			  	this.request({
			  		url: '/Course/MobilePage',
			  		method: 'get',
			  		params: {
			  			pageNo: this.pageIndex,
			  			pageSize: 10,
						CourseTypeId: this.currentFenlei.id
			  		},
			  	}).then(res => {
			  		if(res.code == 200){
			  			if(this.pageIndex == 1){
			  				this.kechengList = [];
			  			}
			  			let rows = res.data.rows;
			  			rows.forEach(item => {
							if(item.imgId){
								item.imgUrl = this.imageTitle + item.imgId
							}else{
								item.imgUrl = 'https://img1.baidu.com/it/u=659677150,414558262&fm=253&fmt=auto&app=138&f=JPEG?w=382&h=500';
							}
			  				this.kechengList.push(item);
			  			})
			  			uni.stopPullDownRefresh()
			  			if((!rows.length || rows.length < 10) && this.pageIndex > 1){
			  							this.pageIndex--;
			  							this.$refs.toast.show({
			  							  title: '',
			  							  content: '没有更多了',
			  							  icon: '',
			  							  image: '',
			  							  duration: 1000
			  							})
			  			}
			  		}
			  	})
			  },
		},
		
	}
</script>

<style lang="scss" scoped>
	.fabu-body{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 55px;
		background-color: rgba(245, 245, 245, 1);
		overflow-y: auto;
	}
	  .image-article {
		border-radius: 8rpx;
		border: 1rpx solid #F8F7F8;
		width: 200rpx;
		height: 200rpx;
		position: relative;
	  }
	.image-pic{
		width: 100%;
		height: 360rpx;
		overflow: hidden;
		background-repeat: no-repeat;
		background-size: cover;
		background-size:100% 100%;
		background-position: top;
		.img{
			width: 100%;
			height: 100%;
		}
	}
	.image-pic-article{
		width: 100%;
		height: 360rpx;
		position: relative;
	}
  .image-picx {
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: top;
    border-radius: 10rpx;
  }
  .article-shadow {
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  }
	.zitineirong{
		color: #555555;
	}
</style>